<template>
  <div class="v2">
    <Drag ref="dragRef">
      <div class="box">Hello World</div>
    </Drag>
  </div>
  <div class="action-list">
    <button @click="handleClick('top')">置顶</button>
    <button @click="handleClick('bottom')">置底</button>
    <button @click="handleClick('center')">居中</button>
    <button @click="handleClick('up')">放大</button>
    <button @click="handleClick('down')">缩小</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Drag from './components/drag/index.vue'

const dragRef = ref(null)

const handleClick = (str) => {
  if (str === 'top') {
    dragRef.value.handleAlignTop()
  }
  if (str === 'bottom') {
    dragRef.value.handleAlignBottom()
  }
  if (str === 'center') {
    dragRef.value.handleAlignCenter()
  }
  if (str === 'up') {
    dragRef.value.handleMagnify()
  }
  if (str === 'down') {
    dragRef.value.handleLessen()
  }
}
</script>
<style lang="scss" scoped>
@import url('./index.scss');
</style>
